<script setup>
import { apiBussinessData } from '@/api'
import { computed, onMounted, reactive, ref } from 'vue'
import BusinessDataEcharts from './BusinessData-Echarts.vue'


const dataObi = reactive({
  Projects: []
})
const getBussinessData = async () => {
  const res = await apiBussinessData()
  Object.assign(dataObi, res)
}


onMounted(() => {
  getBussinessData()
  setInterval(getBussinessData, 60 * 1000)
})

// 头部倒计时
const timeList = ref([])
const targetDate = new Date('2024-12-31').getTime()
// 更新倒计时显示
function updateCountdown () {
  const currentDate = new Date().getTime()
  const timeRemaining = targetDate - currentDate
  const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24))
  const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60))
  const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000)

  timeList.value = [days, hours, minutes, seconds]
  // document.getElementById('countdownDisplay').innerHTML = `<p>${days}</p> <span>:</span> <p>${hours}</p> <span>:</span> <p>${minutes}</p> <span>:</span> <p>${seconds}</p > `
}
// 每秒更新一次倒计时
setInterval(updateCountdown, 1000)

// 项目产值
const targetsData = computed(() => {
  return [
    { branchName: '市场/销售部', AimName: '销售目标', amount: dataObi.SalesTarget, chartData: dataObi.SalesRevenue || 0 },
    { branchName: '研发部', AimName: '产值目标', amount: dataObi.RnDTarget, chartData: dataObi.OutputValue || 0 },
    { branchName: '交付部', AimName: '利润目标', amount: dataObi.DeliveryTarget, chartData: dataObi.Profit || 0 }
  ]
})

// 项目总结
const overallData = computed(() => {
  return [
    { ProjectData: dataObi.PreviousProjectsCount, ProjectType: '往年项目' },
    { ProjectData: dataObi.NewProjectsCount, ProjectType: '24年新项目' },
    { ProjectData: dataObi.OngoingProjectsCount, ProjectType: '进行中项目' },
    { ProjectData: dataObi.DeliveredProjectsCount, ProjectType: '已交付项目' }
  ]
})

// 表格数据
const tableData = computed(() => {
  if (dataObi.Projects.length > 0) {
    return dataObi.Projects.map(project => ({
      serial: project.ID,
      ProjectName: project.Name,
      principal: project.Manager,
      period: project.CyclePercentage,
      mission: project.TaskCompletionPercentage,
      costing: project.CostInvested,
      profit: project.CurrentProfit
    }))
  } else {
    return []
  }
})

const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)

</script>

<template>
  <div class="content">
    <header>
      <div class="headline">经营数据</div>
      <div class="countdownTimer">
        <p class="remainingDays">2024剩余天数</p>
        <div id="countdownDisplay">
          <div>{{ timeList[0] }}
            <span>DAYS</span>
          </div>
          <span><i></i><i></i></span>
          <div>{{ timeList[1] }}
            <span>HRS</span>
          </div>
          <span><i></i><i></i></span>
          <div>{{ timeList[2] }}
            <span>MINS</span>
          </div>
          <span><i></i><i></i></span>
          <div>{{ timeList[3] }}
            <span>SECS</span>
          </div>
        </div>
      </div>
    </header>
    <main>
      <div class="statistics">
        <div class="targets" v-for="(targetsItem,index) in targetsData" :key="index">
          <div class="SalesChart">
            <BusinessDataEcharts :chartData="targetsItem.chartData" :amount="targetsItem.amount"
              :id="'targetsItem'+index" />
            <div class="filament"></div>
          </div>

          <div class="departments">
            <p class="branch">{{ targetsItem.branchName }}</p>
            <div class="Aim">
              <p>{{ targetsItem.AimName }}</p>
              <p>
                <span>{{ targetsItem.amount }}</span>
                <span>万元</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="summarize">
        <div class="overall" v-for="(overallItem,index) in overallData" :key="overallItem">
          <div class="icon">
            <img src="../../assets/BusinessData/projects_slices.png" alt="" />
          </div>
          <div class="Previous">
            <p class="ProjectData">{{ overallItem.ProjectData }}</p>
            <p class="ProjectType">{{ overallItem.ProjectType }}</p>
          </div>
        </div>
      </div>
      <div class="tabulation">
        <el-table :data="tableData" style="width: 100%" class="top">
          <el-table-column prop="serial" label="编号" align="center" />
          <el-table-column prop="ProjectName" label="项目名称" align="center"  />
          <el-table-column prop="principal" label="负责人" align="center"   />
          <el-table-column prop="period" label="周期已过" align="center">
            <template #default="scope">
              <div class="demo-progress">
                <el-progress :percentage="scope.row.period" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="mission" label="任务完成" align="center" >
            <template #default="scope">
              <div class="demo-progress">
                <el-progress :percentage="scope.row.mission" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="costing" label="已投入成本(万元）" align="center"   />
          <el-table-column prop="profit" label="当前利润（万元）" align="center"  />
        </el-table>
        <vue3-seamless-scroll class="seamless-warp scroll" hover-stop="true" :list="tableData" hover="true" step="0.5">
          <el-table :data="tableData" style="width: 100%" class="bottom">
            <el-table-column prop="serial" label="编号" align="center"  />
            <el-table-column prop="ProjectName" label="项目名称" align="center"  />
            <el-table-column prop="principal" label="负责人" align="center" />
            <el-table-column prop="period" label="周期已过" align="center">
              <template #default="scope">
                <div class="demo-progress">
                  <el-progress :percentage="scope.row.period" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="mission" label="任务完成" align="center" >
              <template #default="scope">
                <div class="demo-progress">
                  <el-progress :percentage="scope.row.mission" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="costing" label="已投入成本(万元）" align="center"   />
            <el-table-column prop="profit" label="当前利润（万元）" align="center" />
          </el-table>
        </vue3-seamless-scroll>
      </div>
    </main>
  </div>
</template>

<style scoped  lang="scss">
.content {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(228, 234, 244, 1);
  min-width: 1920px;
  padding-bottom: 30px;
}
header {
  width: 100%;
  height: 110px;
  display: flex;
  justify-content: space-between;
  background: url('../../assets/BusinessData/title_slices.png') no-repeat;
  background-size: 100% 100%;
}
.headline {
  height: 72px;
  font-weight: 400;
  font-size: 60px;
  font-family: DroidSerif;
  letter-spacing: 15px;
  color: #121e36;
  line-height: 72px;
  margin-left: 44px;
  margin-top: 14px;
}
.countdownTimer {
  height: 72px;
  margin-right: 42px;
  margin-top: 20px;
  display: flex;

  .remainingDays {
    font-family: DroidSerif;
    font-weight: 400;
    font-size: 30px;
    color: #2f57b6;
    line-height: 36px;
    margin-top: 14px;
    margin-right: 32px;
    text-align: center;
  }
}

#countdownDisplay {
  display: flex;
  & > span {
    display: block;
    margin: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    i {
      display: block;
      width: 5px;
      height: 5px;
      background: #3d3d3d;
      &:first-child {
        margin-bottom: 6px;
      }
      &:last-child {
        margin-top: 6px;
      }
    }
  }
}
#countdownDisplay > div {
  display: inline-block;
  min-width: 108px;
  padding: 0 15px;
  height: 72px;
  line-height: 72px;
  font-family: D-DIN-Bold, D-DIN-Bold;
  background: url('../../assets/BusinessData/time-bg.png') no-repeat;
  background-size: cover;
  text-align: center;
  font-weight: 700;
  font-size: 60px;
  color: #121e36;
  letter-spacing: 2px;
  position: relative;

  span {
    font-family: DroidSerif;
    font-weight: 400;
    font-size: 16px;
    color: #838d9f;
    line-height: 19px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -25px;
  }
}

main {
  margin: 0 40px;
}
.statistics {
  height: 278px;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;

  .targets {
    width: 590px;
    height: 278px;
    background: #edf2f8;
    display: flex;
    box-shadow: 0 0 12px 0 rgba(187, 202, 255, 0.38);
    border-radius: 10px 10px 10px 10px;
    padding: 39px 44px;

    .SalesChart {
      width: 200px;
      height: 200px;
      margin-right: 40px;
      display: flex;
      position: relative;


      .filament{
        width:123px;
        position: absolute;
        top: 48%;
        left: 19%;
        border:1px solid rgba(18, 30, 54, 0.40);
        float: left;
      }
    }

    .departments {
      flex: 1;
      .branch {
        font-family: DroidSerif, DroidSerif;
        font-weight: 400;
        font-size: 36px;
        color: #121e36;
        line-height: 43px;
        text-stroke: 0px #3980e2;
        margin-top: 46px;
      }

      .Aim {
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        color: #457af7;
        line-height: 32px;
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        width: 240px;
        padding-bottom: 3px;
        border-bottom: 1px solid #ccc;

        p:nth-child(1) {
          width: 92px;
          height: 35px;
          text-align: center;
          background-color: rgba(69, 122, 247, 1);
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          margin-right: 20px;
        }

        p:nth-child(2) {
          span:nth-child(1) {
            font-family: D-DIN-Bold, D-DIN-Bold;
            font-weight: 700;
            font-size: 30px;
            color: #121e36;
          }
          span:nth-child(2) {
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 16px;
            color: rgba(18, 30, 54, 0.5);
            margin-left: 4px;
          }
        }
      }
    }
  }
}
.SalesChart:after{
  width: 103px;
  height: 1px;
  border: 3px solid red;
}

.summarize {
  height: 164px;
  background: #edf2f8;
  border-radius: 10px 10px 10px 10px;
  margin: 35px 0;
  overflow: hidden;
  display: flex;
  .overall {
    display: flex;
    padding-top: 30px;
    margin-left: 90px;
    margin-right: 110px;
    .icon {
      width: 116px;
      height: 104px;
      margin-right: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .Previous {
    .ProjectData {
      font-weight: 700;
      font-size: 48px;
      font-family: D-DIN-Bold;
      line-height: 52px;
    }
    .ProjectType {
      width: 122px;
      font-weight: 500;
      font-size: 22px;
      color: #121e36;
      line-height: 32px;
      text-align: left;
    }
  }
}

.tabulation {
  height: 398px;
  background: #edf2f8;
  box-shadow: 0 0 12px 0 rgba(187, 202, 255, 0.38);
  border-radius: 10px 10px 10px 10px;
  padding: 30px 30px 20px;

  .center-table {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

::v-deep .seamless-warp {
  height: 278px;
  overflow: hidden;
}
::v-deep .top .el-table__body-wrapper {
  display: none;
}
::v-deep .bottom .el-table__header-wrapper {
  display: none;
  width: 100%;
}
</style>
<style lang="scss">
.el-table th.el-table__cell {
  background-color: rgba(69, 122, 247, 0.2);
  height: 70px;
  font-weight: 700;
  font-size: 22px;
  color: #2f57b6;
  line-height: 32px;
  //text-align: left !important;
  //padding-left: 60px !important;
  font-family: Source Han Sans, Source Han Sans;
}
.el-table .el-table__body-wrapper tbody tr:nth-child(2n) {
  background-color: rgba(69, 122, 247, 0.05);
}
.el-progress{
  width: 150px;
}
.el-table .el-table__body-wrapper tbody tr td:nth-child(4){
  padding-left: 50px;
}
.el-table .el-table__body-wrapper tbody tr td:nth-child(5) {
  padding-left: 50px;
}
//.el-table .el-table__body-wrapper tbody tr td:nth-child(7) {
//  text-align: right;
//  padding-right: 70px;
//}
//.el-table .el-table__body-wrapper tbody tr td:nth-child(1){
//  padding-left:60px !important;
//}
//.el-table .el-table__body-wrapper tbody tr td:nth-child(2){
//  padding-left:58px !important;
//}
//.el-table .cell:nth-child(6){
//  text-align: right;
//}
//.el-table .cell:nth-child(7){
//  text-align: right;
//}

</style>
